<!--  -->
<template>
<div class='innexForm'>
  <el-form :model="formData"
            v-if="windowShow"
            ref="formData"
            :disabled="true"
            label-width="135px"
            label-height='37px'
            size="mini">
    <el-row>
      <el-col :span="24">
        <el-form-item label="网格" prop="allGridIdArr">
          <div class="block">
            <el-cascader placeholder="暂无内容"
              :options="treeOption"
              style="width:100%"
              filterable
              clearable
              :props="gridIdProps"
              v-model="formData.allGridIdArr">
            </el-cascader>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="showInput === 0 || showInput === 1">
        <el-form-item label="所属小区" prop="communityId">
          <el-select filterable :disabled="showSpecial" no-data-text="暂无内容" v-model="formData.communityId"
            placeholder="暂无内容">
            <el-option v-for="item in communityData" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="showInput === 0 || showInput === 1">
        <el-form-item label="所属楼栋" prop="buildingId">
          <el-select filterable
            :disabled="showSpecial"
            no-data-text="暂无内容"
            placeholder="暂无内容"
            v-model="formData.buildingId">
            <el-option v-for="item in buildingData" :key="item.id" :value="item.id" :label="item.buildingName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="showInput === 0 || showInput === 1">
        <el-form-item label="所属单元" prop="unitId">
          <el-select filterable
            :disabled="showSpecial"
            no-data-text="暂无内容"
            v-model="formData.unitId"
            placeholder="暂无内容">
            <el-option v-for="item in unitList"
              :key="item.id"
              :value="item.id"
              :label="item.unitName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12"
        v-if="showInput === 0 || showInput === 1">
        <el-form-item label="房屋" prop="houseId">
          <el-select filterable
            :disabled="showSpecial"
            clearable
            v-model="formData.houseId"
            placeholder="暂无内容">
            <el-option v-for="item in houseData" :key="item.id" :value="item.id" :label="item.houseNumber"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="showInput === 0 || showInput === 2">
        <el-form-item label="院落"
          prop="courtyardId">
          <el-select filterable
                      clearable
                      :disabled="showCourtyard"
                      v-model="formData.courtyardId"
                      placeholder="暂无内容">
            <el-option v-for="item in courtyardData"
                        :key="item.id"
                        :value="item.id"
                        :label="item.courtyardNo"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="房屋地址"
                      prop="houseAddr">
          <el-input v-model="formData.houseAddr"
                    readonly
                    placeholder="暂无内容"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="建筑面积"
                      prop="buildingArea">
          <el-input v-model="formData.buildingArea"
                    readonly
                    placeholder="暂无内容"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="建筑用途"
                      prop="buildingUse">
          <el-select filterable
                      readonly
                      v-model="formData.buildingUse"
                      placeholder="暂无内容">
            <el-option v-for="item in dictData.buildUseType"
                        :key="item.id"
                        :value="item.code"
                        :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="房主姓名"
                      prop="homeownerName">
          <el-input v-model="formData.homeownerName"
                    readonly
                    placeholder="暂无内容"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="证件代码"
                      prop="certificateCode">
          <el-select filterable
                      v-model="formData.certificateCode"
                      placeholder="暂无内容">
            <el-option v-for="item in ideferCodeData"
                        :key="item.code"
                        :value="item.code"
                        :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="证件号码"
                      prop="homeownerIdCard">
          <el-input v-model="formData.homeownerIdCard"
                    readonly
                    placeholder="暂无内容"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="房主联系方式"
                      prop="homeownerPhone">
          <el-input v-model="formData.homeownerPhone"
                    readonly
                    placeholder="暂无内容"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="房主现住地详址"
                      prop="homeownerLiveAddr">
          <el-input v-model="formData.homeownerLiveAddr"
                    readonly
                    placeholder="暂无内容"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="出租用途"
                      prop="rentalUse">
          <el-select filterable
                      v-model="formData.rentalUse"
                      placeholder="暂无内容">
            <el-option v-for="item in rentalUseTypeOption"
                        :key="item.id"
                        :value="item.code"
                        :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="隐患类型"
                      prop="dangerType">
          <el-select filterable
                      v-model="formData.dangerType"
                      placeholder="暂无内容">
            <el-option v-for="item in dictData.dangerType"
                        :key="item.id"
                        :value="item.code"
                        :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="承租人身份证号码"
                      prop="lesseeIdCard">
          <el-input v-model="formData.lesseeIdCard"
                    placeholder="暂无内容"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="承租人姓名"
                      prop="lesseeName">
          <el-input v-model="formData.lesseeName"
                    placeholder="暂无内容"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="承租人联系方式"
                      prop="lesseePhone">
          <el-input v-model="formData.lesseePhone"
                    placeholder="暂无内容"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="经纬度"
                      prop="longitude">
            <el-col :span="11">
              <el-input v-model="formData.longitude"
                        :disabled="true"
                        placeholder="经度"></el-input>
            </el-col>
            <el-col :span="2"
                    style="text-align: center">-</el-col>
            <el-col :span="11">
              <el-input v-model="formData.latitude"
                        :disabled="true"
                        placeholder="纬度"></el-input>
            </el-col>
          </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div slot="footer" class="dialog-footer"  v-if="windowShow">
    <el-button class="spical-btn" @click="handleCheckList" type="primary">查看房屋</el-button>
  </div>
  <template v-if="!windowShow">
    <div class="toback">
      <el-button type="primary" @click="toback" plain>返回</el-button>
    </div>
    <app-table :page-data="peopleData" class="spcial-table"
    :table-columns="tableColumns"
    v-on:currentChange="handleCurrentChange"/>
  </template>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getUserGridTree } from '@/utils/SessionDataUtil'
import AppUpload from '@/components/AppUpload'
import { getAllRegion } from '@/utils/region'
import AppTable from '@/components/MinAppTable'
import {findCommunityList, findUnitList, getHouse, findBuildingList, findCourtyardList, getRentalHouse, findHouseList} from '@/http/FangWuGuanLiApi'
import DictDataUtil from '@/utils/DictDataUtil'
import {findPopCDetailList, findPopDetailList} from '@/http/PopulationApi'
import { getDictDataOption } from '@/utils/getDictDataOption'
export default {
// import引入的组件需要注入到对象中才能使用
  name: 'rentalHouseForm',
  props: {
    detailForm: {
      type: Object,
      default: function () {
        return {
        }
      }
    }
  },
  components: {AppUpload, AppTable},
  data () {
    // 这里存放数据
    return {
      formData: {},
      peopleData: {},
      queryData: {},
      showMap: false,
      showSpecial: false,
      showCourtyard: false,
      windowShow: true,
      treeData: [],
      unitList: [],
      unitTableData: [],
      communityData: [],
      buildingData: [],
      ideferCodeData: [],
      treeOption: [],
      courtyardData: [],
      rentalUseTypeOption: [],
      houseData: [],
      dictData: [],
      address: {},
      showInput: 0,
      gridIdProps: {
        label: 'name',
        value: 'id'
      },
      tableColumns: [
        { prop: 'name', label: '姓名' },
        { prop: 'identityNumber', label: '公民身份号码' },
        { prop: 'gender', label: '性别', formatter: this.genderFormatter, width: '50' },
        { prop: 'phone', label: '联系方式' },
        { prop: 'nation', label: '民族', formatter: this.nationFormatter, width: '70' },
        { prop: 'birthplace', label: '籍贯' }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 方法集合
  methods: {
    // 格式化性别
    genderFormatter (row, column) {
      let resGender = ''
      for (let i = 0; i < this.genderOption.length; i++) {
        if (this.genderOption[i].code === row.gender) {
          resGender = this.genderOption[i].name
          break
        }
      }
      return resGender
    },
    // 格式化民族
    nationFormatter (row, column) {
      let resNation = ''
      for (let i = 0; i < this.nationOption.length; i++) {
        if (this.nationOption[i].code === row.nation) {
          resNation = this.nationOption[i].name
          break
        }
      }
      return resNation
    },
    getTreeData () {
      let gridTree = getUserGridTree()
      if (gridTree && gridTree instanceof Array) {
        this.treeData = gridTree
        this.treeOption = gridTree
      }
    },
    getHouseDetailData (houseId) {
      getHouse(houseId).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.formData = resp.data
          let regionData = {}
          regionData.id = this.formData.gridId
          regionData.items = this.treeData
          let gridIdArr = getAllRegion(regionData)
          this.$set(this.formData, 'allGridIdArr', gridIdArr)
          let gridId = this.formData.gridId
          this.$set(this.formData, 'buildingId', data.buildingId)
          this.$set(this.formData, 'unitId', data.unitId)
          this.$set(this.formData, 'communityId', data.communityId)
          this.$set(this.formData, 'houseId', data.id)
          this.$set(this.formData, 'homeownerLiveAddr', data.homeownerLiveAddr)
          this.$set(this.formData, 'homeownerIdCard', data.homeownerIdCard)
          this.$set(this.formData, 'latitude', data.latitude)
          this.$set(this.formData, 'longitude', data.longitude)
          this.$set(this.formData, 'certificateCode', data.certificateCode)
          this.getCommunityData(gridId)
          this.getBuildingData(this.formData.communityId)
          this.getUnit(this.formData.buildingId)
          this.getHouseData(this.formData.unitId)
        }
      })
    },
    getHouseData (id) {
      findHouseList({ unitId: id }).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data && data instanceof Array) {
            this.houseData = data
          }
        }
      })
    },
    getUnit (buildingId) {
      if (buildingId) {
        let param = { buildingId: buildingId }
        findUnitList(param).then(resp => {
          if (resp.code && resp.code === '200') {
            let data = resp.data
            if (data && data instanceof Array) {
              this.unitTableData = data.reverse()
              this.unitList = data
            }
          }
        })
      }
    },
    getCommunityData (gridId) {
      if (gridId && gridId !== '') {
        let param = { likeAllGridId: gridId }
        findCommunityList(param).then(resp => {
          if (resp.code && resp.code === '200') {
            let data = resp.data
            if (data && data instanceof Array) {
              this.communityData = data
            }
          }
        })
      }
    },
    getBuildingData (id) {
      findBuildingList({ communityId: id }).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data && data instanceof Array) {
            this.buildingData = data
          }
        }
      })
    },
    getCourtyardData (id) {
      findCourtyardList({ likeAllGridId: id }).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data && data instanceof Array) {
            this.courtyardData = data
          }
        }
      })
    },
    getRentalHouseData (id) {
      getRentalHouse(id).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (!data.courtyardId) {
            this.showInput = 1
            this.getHouseDetailData(data.houseId)
          } else {
            this.formData.communityId = ''
            this.formData.buildingId = ''
            this.formData.unitId = ''
            this.formData.houseId = ''
            this.showInput = 2
            this.$set(this.formData, 'courtyardId', data.courtyardId)
            this.$set(this.formData, 'certificateNumber', data.certificateNumber)
            this.$set(this.formData, 'homeownerLiveAddr', data.homeownerLiveAddr)
            this.$set(this.formData, 'latitude', data.latitude)
            this.$set(this.formData, 'longitude', data.longitude)
          }
        }
      })
    },
    handleCheckList (param) {
      if (this.formData.courtyardId) {
        this.queryData.courtyardId = this.formData.courtyardId
        this.windowShow = false
        findPopCDetailList(this.queryData).then(resp => {
          if (resp.code && resp.code === '200') {
            if (resp.data) {
              this.peopleData = resp.data
            } else {
              this.peopleData = {'offset': 0, 'limit': 10, 'total': 0, 'sortField': 'lastUpdate', 'sortOrder': 'DESC', 'items': []}
            }
          }
        })
      } else {
        this.queryData.houseId = this.formData.id
        this.windowShow = false
        findPopDetailList(this.queryData).then(resp => {
          if (resp.code && resp.code === '200') {
            if (resp.data) {
              this.peopleData = resp.data
            } else {
              this.peopleData = {'offset': 0, 'limit': 10, 'total': 0, 'sortField': 'lastUpdate', 'sortOrder': 'DESC', 'items': []}
            }
          }
        })
      }
    },
    handleCurrentChange (val) {
      this.queryData.offset = (val - 1) * 10
      this.handleCheckList()
    },
    toback () {
      this.windowShow = true
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getTreeData()
    this.dictData.buildingType = DictDataUtil.getBuildingType()
    this.ideferCodeData = getDictDataOption('证件代码')
    this.rentalUseTypeOption = getDictDataOption('出租用途')
    this.genderOption = getDictDataOption('性别')
    this.nationOption = getDictDataOption('民族')
  },
  watch: {
    detailForm: {
      handler: function (data) {
        this.formData = JSON.parse(JSON.stringify(data))
        this.getRentalHouseData(this.formData.id)
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style scoped>
.el-form >>> .el-input__inner {
  height: 37px;
  background: none
}
.el-form >>> .el-textarea__inner, .el-form >>> .el-upload  {
  background: none
}
.el-form >>> .el-form-item__label {
  line-height: 37px;
  color:#fff;
}
.el-form >>> .el-cascader__label {
  line-height: 37px;
}
.el-form >>> .el-select.el-select--mini {
  width: 100%
}
</style>
